<template>
  <div class="container">
    <div class="content" v-for="(item, index) in listData" :key="index">
      <div class="content-item">
        <div class="img">
          <img :src="item.imgUrl" alt="" />
        </div>
        <div class="content-text">
          <p v-show="item.orderTime" class="order-time">
            {{ formatTime(item.orderTime) }}
          </p>
          <p class="area">{{ item.area }}</p>
          <p class="house-type">{{ item.houseType }}</p>
          <p class="distance">{{ item.distance }}</p>
          <div class="rent-type">{{ item.rendType }}</div>
          <div class="price">{{item.price}}元/月</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Content",
  props: {
    listData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  watch:{
    listData(){
      // console.log(this.listData);
    }
  },
  methods: {
    formatTime(val) {
      let date = new Date(val);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}/${month}/${day}`;
    },
  },
};
</script>

<style scoped lang='less'>
.container {
  width: 94%;
  margin: 0 auto;
  .content {
    box-sizing: border-box;
    width: 100%;
    height: 2.5rem;
    padding: 0.2rem;
    background-color: #fff;
    margin-top: 0.2rem;
    border-radius: 6px;
    .content-item {
      width: 100%;
      height: 100%;
      display: flex;
      .img {
        width: 40%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .content-text {
        width: 60%;
        height: 100%;
        padding-left: 0.2rem;
        text-align: left;
        position: relative;
        .order-time {
          color: #ff5555;
          letter-spacing: 1px;
          font-size: 16px;
        }
        .area {
          font-size: 14px;
        }
        .house-type,
        .distance {
          font-size: 12px;
        }
        .rent-type {
          position: absolute;
          left: 0.2rem;
          bottom: 0;
          width: 0.8rem;
          height: 0.4rem;
          line-height: 0.4rem;
          text-align: center;
          font-weight: bold;
          letter-spacing: 1px;
          font-size: 15px;
          border: 2px solid #618698;
          border-radius: 8px;
          color: #618698;
        }
        .price {
          height: 0.5rem;
          color: #ff0000;
          position: absolute;
          font-size: 15px;
          right: 0.26rem;
          bottom: 0;
        }
      }
    }
  }
}
</style>